<template>
  <div class="welcome-banner">
    <div class="welcome-content">
      <div class="welcome-info">
        <h1 class="welcome-title">欢迎回来，{{ userName }}！</h1>
        <p class="welcome-subtitle">今天又是充满活力的一天，让我们开始管理工作吧</p>
        <div class="welcome-meta">
          <span class="meta-item">
            <icon-calendar />
            {{ currentDate }}
          </span>
          <span class="meta-item" v-if="currentTenant">
            <icon-apps />
            当前租户：{{ currentTenant.name }}
          </span>
        </div>
      </div>

      <div class="welcome-avatar">
        <a-avatar :size="80" class="user-avatar">
          <img v-if="userInfo?.avatar" :src="userInfo.avatar" alt="avatar" />
          <icon-user v-else />
        </a-avatar>
        <div class="avatar-badge" v-if="userRole">
          {{ roleDisplayName }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IconCalendar, IconApps, IconUser } from '@arco-design/web-vue/es/icon';
import dayjs from 'dayjs';
import { computed } from 'vue';

import { useUserStore } from '@/stores';

const userStore = useUserStore();

// 计算属性
const userInfo = computed(() => userStore.userInfo);
const currentTenant = computed(() => userStore.currentTenant);
const userRole = computed(() => userStore.userRole);
const userName = computed(() => userStore.userName);

const currentDate = computed(() => {
  return dayjs().format('YYYY年MM月DD日 dddd');
});

const roleDisplayName = computed(() => {
  const roleMap: Record<string, string> = {
    super_admin: '超级管理员',
    tenant_admin: '租户管理员',
    operator: '操作员'
  };
  return roleMap[userRole.value] || userRole.value;
});
</script>

<style scoped lang="less">
.welcome-banner {
  padding: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  margin-bottom: 24px;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}

.welcome-info {
  flex: 1;
}

.welcome-title {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

.welcome-subtitle {
  margin: 0 0 16px 0;
  font-size: 16px;
  opacity: 0.9;
  line-height: 1.5;
}

.welcome-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  opacity: 0.8;

  .arco-icon {
    font-size: 16px;
  }
}

.welcome-avatar {
  position: relative;
  text-align: center;
}

.user-avatar {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 3px solid rgba(255, 255, 255, 0.3);

  :deep(.arco-avatar-text) {
    font-size: 32px;
  }
}

.avatar-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.welcome-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.action-badge {
  :deep(.arco-badge-number) {
    top: -2px;
    right: -6px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .welcome-banner {
    padding: 20px;
  }

  .welcome-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
  }

  .welcome-info {
    margin-bottom: 20px;
  }

  .welcome-title {
    font-size: 24px;
  }

  .welcome-meta {
    justify-content: center;
  }

  .welcome-actions {
    justify-content: center;

    .arco-btn {
      flex: 1;
      min-width: 120px;
    }
  }
}

@media (max-width: 480px) {
  .welcome-actions {
    flex-direction: column;

    .arco-btn {
      width: 100%;
    }
  }

  .meta-item {
    font-size: 12px;
  }
}
</style>
